{% load static %}

{% include 'common/header.html' %}


<div class="container" style="padding-top:20px;">
    <div class="text-left" style="color:#ffffff; ">Downloading EMNPD Data</div>
    <div class="text-left" style="color:#ffffff; margin-bottom: 30px;">EMNPD is a free to use database with most of the data readily available for download. Exceptions may exist in cases where licensing agreements prevent our data contributors from allowing bulk downloads of some data sets. The data in EMNPD comes from thousands of published paper. PubChem strives to make clear the data provenance of all content. Within a given data table row or beneath provided content, the data provenance is provided.
    </div>
</div>

<div class="container">


<div class="flex f-j-c  align-center" style="color:#ffffff;font-size:18px;font-weight:bold;margin-bottom: 10px; ">Full Data Download</div>


						  <table class="summaryTable docIndex table table-bordered table-striped table-hover">
							<colgroup>
							  <col class="col-package">
							  <col class="col-class">
							  <col class="col-description">
							</colgroup>
							<tbody>
{#                            <tr>#}
{#							  <th>Compound Group</th>#}
{#							  <th>released_on</th>#}
{#							  <th>Dowonload（SDF）</th>#}
{#							  <th>Dowonload（CSV）</th>#}
{#							</tr>#}

                             {% for item in download_list %}
                            <tr>
                              <td>{{item.name}}</td>
                              <td style="width:180px;"><a href="{{item.path}}" target="_blank">  <img  style="width:20px;height:20px;" src="{% static 'assets/images/download.png' %}" alt="" style="display:block;width:100%;">
                                Click to Save</a></td>
                            </tr>
                            {% endfor %}



							</tbody>
							</table>


                            <!-- 分页 -->
                            {% if page_obj.has_other_pages %}
                            <div class="pagination">
                                {% if page_obj.has_previous %}
                                    <a href="?page={{ page_obj.previous_page_number }}">&laquo;</a>
                                {% endif %}

                                {% for i in page_obj.paginator.page_range %}
                                    {% if page_obj.number == i %}
                                        <span class="active">{{ i }}</span>
                                    {% else %}
                                        <a href="?page={{ i }}">{{ i }}</a>
                                    {% endif %}
                                {% endfor %}

                                {% if page_obj.has_next %}
                                    <a href="?page={{ page_obj.next_page_number }}">&raquo;</a>
                                {% endif %}
                            </div>
                            {% endif %}
                            <style>
tbody>tr, tbody>tr a{ color:#ffffff}
tbody>tr:hover, tbody>tr:hover a{color:#000000}
 .table-striped>tbody>tr:nth-of-type(odd), .table-striped>tbody>tr:nth-of-type(odd) a{ background:#f9f9f9;color:#000000}





.pagination {
  display: flex;
  justify-content: center;
  padding-left: 0;
  list-style: none;
  margin: 20px 0;
}

.pagination a,
.pagination span {
  position: relative;
  display: block;
  padding: 8px 16px;
  margin: 0 4px;
  border-radius: 4px;
  color: #1e6887;
  background-color: #fff;
  border: 1px solid #dee2e6;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination a:hover {
  color: #fff;
  background-color: #1C2B4B;
  border-color: #1e6887;
  text-decoration: none;
}

.pagination .active {
  color: #fff;
  background-color: #1C2B4B;
  border-color: #1e6887;
}

.pagination .active:hover {
  cursor: default;
}

.pagination a:first-child,
.pagination a:last-child {
  padding: 8px 12px;
}

.pagination a:first-child:hover,
.pagination a:last-child:hover {
  background-color: #1e6887;
  color: #fff;
}
                            </style>


 </div>


{% include 'common/footer.html' %}


